<template>
    <view class="pub_page pub_page_bg pub_square pub_header_padding pub_tabbar_padding">
        <pub-tabbar :active="1"></pub-tabbar>
        <pub-head headerName="square" :headerConfig="headerConfig" @headerBack="headerBack"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="tab_div">
                <!-- <div class="tab" :class="swiperKey==0?'tab_active':''" @click="swiperKeyClick(0)">人脉</div> -->
                <div class="tab" :class="swiperKey==0?'tab_active':''" @click="swiperKeyClick(0)">群组</div>
                <div class="tab" :class="swiperKey==1?'tab_active':''" @click="swiperKeyClick(1)">朋友圈</div>
                <div class="tab" :class="swiperKey==2?'tab_active':''" @click="swiperKeyClick(2)">广场</div>
                <div class="tab" :class="swiperKey==3?'tab_active':''" @click="swiperKeyClick(3)">广告中心</div>
            </div>
            <swiper class="swiper_box" :vertical="false" @animationfinish="swiperChange" @change="swiperChange"
                :current="swiperKey">
                <!-- <swiper-item class="swiper_box_item">
                    <contactsComponent ref="contactsComponent" @openAddAlert="openAddAlert" />
                </swiper-item> -->
                <swiper-item class="swiper_box_item">
                    <chatGroupComponent ref="chatGroupComponent" @openAddGroupAlert="openAddGroupAlert" />
                </swiper-item>
                <swiper-item class="swiper_box_item">
                    <friendsComponent ref="friendsComponent_1" :openType="1"
                        @openFriendsComments="openFriendsComments" />
                </swiper-item>
                <swiper-item class="swiper_box_item">
                    <friendsComponent ref="friendsComponent_2" :openType="2"
                        @openFriendsComments="openFriendsComments" />
                </swiper-item>
                <swiper-item class="swiper_box_item">
                    <adCenterComponent ref="adCenterComponent" />
                </swiper-item>
            </swiper>
        </div>

        <friendsComments :postInfo="friendsCommentsInfo" :userInfo="userInfo"
            @closeFriendsComments="closeFriendsComments" />

        <div class="add_user_alert_div" v-if="addAlertData.show">
            <div class="alert_box">
                <pub-image class="logo" :src="addAlertData.userData.avatar" />
                <div class="title">{{addAlertData.userData.nickName}}</div>
                <div class="spans">
                    <div class="span_1" :class="addAlertData.userData.vipAccount==1?'':'span_1_no'"
                        @click="pageDeal('open_vip_account')"></div>
                    <div class="span_2" v-if="addAlertData.userData.isVipGrade==1"></div>
                    <div class="span_3">Lv.{{ addAlertData.userData.grade }}</div>
                </div>
                <div class="labels" v-if="addAlertData.userData.labels.length">
                    <div class="li" v-for="(li,key) in addAlertData.userData.labels" :key="key">
                        <pub-image class="img" :src="li.coverImg"></pub-image>
                        <div class="txt">{{ li.title }}</div>
                    </div>
                </div>
                <div class="pub_btn" @click="sureAdd">确定添加</div>
                <div class="msg">当前添加对方为自己的人脉关系 <br> 本次添加将消耗 20 CTT</div>
            </div>
            <text @click="addAlertData.show=false" class="close icon-font-basic icon-b-off"></text>
        </div>

        <div class="contacts_alert_div" v-if="contactsAlertData.show">
            <div class="alert_div" :class="contactsAlertData.show ? 'alert_div_animation' : ''">
                <div class="alert_title">筛选 <text @click="contactsAlertData.show=false"
                        class="close icon-font-basic icon-b-off-1"></text></div>
                <div class="lis_box">
                    <div class="title">昵称</div>
                    <div class="inputs">
                        <input class="input" placeholder="请输入" type="text" v-model="contactsAlertData.search.key" />
                    </div>
                    <div class="title">地区</div>
                    <div class="lis">
                        <picker class="li" :range="contactsAlertData.picker.cityList[0]" range-key="province"
                            :value="contactsAlertData.search.cityListChoose[0]"
                            @change="(data) => cityListPickerChange(0, 'province', data)"
                            :class="contactsAlertData.search.cityListName[0]?'li_active':''">
                            <view class="uni-input">{{ contactsAlertData.search.cityListName[0] || '省份' }}</view>
                        </picker>
                        <picker v-if="contactsAlertData.search.cityListName[0] != ''" class="li"
                            :range="contactsAlertData.picker.cityList[1]" range-key="city"
                            :value="contactsAlertData.search.cityListChoose[1]"
                            @change="(data) => cityListPickerChange(1, 'city', data)"
                            :class="contactsAlertData.search.cityListName[1]?'li_active':''">
                            <view class="uni-input">{{ contactsAlertData.search.cityListName[1] || '市' }}</view>
                        </picker>
                        <picker v-if="contactsAlertData.search.cityListName[1] != ''" class="li"
                            :range="contactsAlertData.picker.cityList[2]" range-key="region"
                            :value="contactsAlertData.search.cityListChoose[2]"
                            @change="(data) => cityListPickerChange(2, 'region', data)"
                            :class="contactsAlertData.search.cityListName[2]?'li_active':''">
                            <view class="uni-input">{{ contactsAlertData.search.cityListName[2] || '县' }}</view>
                        </picker>
                    </div>
                    <div class="title" v-if="contactsAlertData.picker.label.length">标签</div>
                    <div class="lis">
                        <div class="li" :class="contactsAlertData.search.labelId == li.id?'li_active':''"
                            v-for="(li,key) in contactsAlertData.picker.label" :key="key"
                            @click="contactsAlertData.search.labelId = li.id">{{ li.title }}</div>
                    </div>
                    <div class="title">性别</div>
                    <div class="lis">
                        <div class="li" :class="contactsAlertData.search.sex == li.value?'li_active':''"
                            v-for="(li,key) in contactsAlertData.picker.sex" :key="key"
                            @click="contactsAlertData.search.sex = li.value">{{ li.title }}</div>
                    </div>
                </div>
                <div class="bottom_div">
                    <div class="pub_btn" @click="contactsClick('reset')">重置</div>
                    <div class="pub_btn" @click="contactsClick('sure')">确定筛选</div>
                </div>
            </div>
        </div>

        <div class="add_group_alert_div" v-if="addGroupAlertData.show">
            <div class="alert_box">
                <pub-image class="logo" :src="addGroupAlertData.groupData.groupAvatar" />
                <div class="title">{{addGroupAlertData.groupData.groupName}}</div>
                <div class="text" v-if="addGroupAlertData.groupData.introduction">
                    <div class="p_1">群聊介绍</div>
                    <div class="p_2">{{addGroupAlertData.groupData.introduction}}</div>
                </div>
                <div class="text">
                    <div class="p_3">群创建时间：{{addGroupAlertData.groupData.createTime}}</div>
                </div>
                <br>
                <div v-if="addGroupAlertData.groupData.isGroupMember" class="pub_btn" @click="openGroupInfo">进入群聊</div>
                <div v-else class="pub_btn" @click="sureAddGroup">申请加入</div>
            </div>
            <text @click="addGroupAlertData.show=false" class="close icon-font-basic icon-b-off"></text>
        </div>
    </view>
</template>

<script>
import contactsComponent from './components/contacts.vue'
import friendsComponent from './components/friends.vue'
import adCenterComponent from './components/ad_center.vue'
import friendsComments from './components/friends_comments.vue'
import chatGroupComponent from './components/chat_group.vue'
export default {
    components: { contactsComponent, friendsComponent, adCenterComponent, friendsComments, chatGroupComponent },
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '人脉',//标题栏内容
                title_color: '#fff',
                left_type: 0,
                left_content: '../../static/aimg/img_69.png'
            },

            swiperKey: 0,
            friendsCommentsInfo: {
                show: false,
                id: '',
                key: -1
            },

            addAlertData: {
                show: false,
                userData: '',
                userKey: -1
            },

            addGroupAlertData: {
                show: false,
                groupData: '',
                groupKey: -1
            },

            userInfo: {},

            contactsAlertData: {
                show: false,
                picker: {
                    sex: [{ value: '', title: '全部' }, { value: 1, title: '男' }, { value: 2, title: '女' }],
                    label: [],
                    cityList: [[], [], []],
                },
                search: {
                    sex: '',
                    labelId: '',
                    key: '',

                    cityListChoose: [0, 0, 0],
                    cityListName: ['', '', ''],
                }
            }
        };
    },
    onLoad() {
        this.getUserInfo();
        this.getLabelInfo();
        this.getNotOpenList({
            cityType: 1,
            isOpen: 1
        });
        const that = this;
        uni.$on("friendsPostBack", function (data) {
            // console.log(data);
            that.$refs.friendsComponent_1.getZpagingList('reload');
        })
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {
        headerBack(data) {
            if (data.type == 'left') {
                this.contactsAlertData.show = true;
            }
        },
        contactsClick(type) {
            if (type == 'reset') {
                this.contactsAlertData.search = {
                    sex: '',
                    labelId: '',

                    cityListChoose: [0, 0, 0],
                    cityListName: ['', '', ''],
                }
            } else if (type == 'sure') {
                this.contactsAlertData.show = false;
                const params = JSON.parse(JSON.stringify(this.contactsAlertData.search));
                this.$refs.contactsComponent.getZpagingList('reload', {
                    sex: params.sex,
                    key: params.key,
                    labelId: params.labelId,
                    province: params.cityListName[0],
                    city: params.cityListName[1],
                    region: params.cityListName[2],
                });
            }
        },
        cityListPickerChange(key, type, data) {
            // console.log(type, data);
            this.contactsAlertData.search.cityListChoose[key] = data.detail.value;
            this.contactsAlertData.search.cityListName[key] = this.contactsAlertData.picker.cityList[key][data.detail.value][type];
            if (type == 'province') {
                this.getNotOpenList({
                    cityType: 2,
                    province: this.contactsAlertData.search.cityListName[0],
                    isOpen: 1
                });
                this.contactsAlertData.search.cityListChoose[1] = 0;
                this.contactsAlertData.search.cityListName[1] = '';
                this.contactsAlertData.search.cityListChoose[2] = 0;
                this.contactsAlertData.search.cityListName[2] = '';
            } else if (type == 'city') {
                this.getNotOpenList({
                    cityType: 3,
                    province: this.contactsAlertData.search.cityListName[0],
                    city: this.contactsAlertData.search.cityListName[1],
                    isOpen: 1
                });
                this.contactsAlertData.search.cityListChoose[2] = 0;
                this.contactsAlertData.search.cityListName[2] = '';
            }
            this.$forceUpdate();
        },
        async getNotOpenList(data) {
            this.$comFun.openLoading();
            const res = await this.$request.get('quan/getCityList', {
                ...data
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.contactsAlertData.picker.cityList[data.cityType - 1] = res.result;
                this.$forceUpdate();
            }
        },
        async getLabelInfo() {
            this.$comFun.openLoading();
            const res_1 = await this.$request.get('quan/getLabelList', {});
            this.$comFun.closeLoading();
            // console.log(res);
            if (res_1.code == 200) {
                res_1.result.unshift({
                    id: "",
                    title: "全部"
                });
                this.contactsAlertData.picker.label = res_1.result;
            }
        },
        async getUserInfo() {
            const res = await this.$request.get('user/userInfo', {});
            // console.log(res);
            if (res.code == 200) {
                this.userInfo = res.result;
            }
            this.$refs.chatGroupComponent.getZpagingList('init');
        },
        swiperKeyClick(type) {
            this.swiperKey = type;
        },
        swiperChange(e) {
            // console.log(e);
            if (e.type == 'animationfinish') {
                this.swiperKey = e.detail.current;
                this.dealPage();
            }
        },
        dealPage() {
            this.headerConfig.left_type = 0;
            if (this.swiperKey == 3) {
                this.$refs.adCenterComponent.getZpagingList('init');
            } else if (this.swiperKey == 1) {
                this.$refs.friendsComponent_1.getZpagingList('init');
            } else if (this.swiperKey == 2) {
                this.$refs.friendsComponent_2.getZpagingList('init');
            } else if (this.swiperKey == 0) {
                this.$refs.chatGroupComponent.getZpagingList('init');
            }
        },
        openFriendsComments(info) {
            this.friendsCommentsInfo = {
                show: true,
                id: info.id,
                key: info.key,
            }
        },
        closeFriendsComments(data) {
            console.log(data);
            if (data && data.postKey != -1) {
                if (this.swiperKey == 1) {
                    this.$refs.friendsComponent_1.list[data.postKey].commentNum++;
                } else if (this.swiperKey == 2) {
                    this.$refs.friendsComponent_2.list[data.postKey].commentNum++;
                }
            } else {
                this.friendsCommentsInfo = this.$options.data().friendsCommentsInfo;
            }
        },
        async openAddAlert(data) {
            this.$comFun.openLoading();
            const res = await this.$request.get('quan/getConnectionsInfo', {
                onlyId: data.info.onlyId,
            });
            console.log(1, res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                res.result.labels = res.result.labels;
                this.addAlertData = {
                    show: true,
                    userData: res.result,
                    userKey: data.key
                }
            }
        },
        async sureAdd() {
            this.$comFun.openLoading();
            const res = await this.$request.get('chat/addFriend', {
                id: this.addAlertData.userData.onlyId,
            });
            console.log(1, res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                if (this.$txChat) {
                    let message = this.$txChat.createTextMessage({
                        to: this.addAlertData.userData.onlyId,
                        conversationType: this.$TencentCloudChat.TYPES.CONV_C2C,
                        // 消息优先级，用于群聊。如果某个群的消息超过了频率限制，后台会优先下发高优先级的消息
                        // priority: TencentCloudChat.TYPES.MSG_PRIORITY_NORMAL,
                        payload: {
                            text: '我们成为好友啦，快来聊天吧'
                        },
                    });
                    // 2. 发送消息
                    let promise = this.$txChat.sendMessage(message);
                    promise.then(function (imResponse) {
                        // 发送成功
                        console.log(imResponse);
                    }).catch(function (imError) {
                        // 发送失败
                        console.warn('sendMessage error:', imError);
                    });
                }
                this.$refs.contactsComponent.list[this.addAlertData.userKey].isAdd = true;
                this.$refs.contactsComponent.list[this.addAlertData.userKey].waitAccrueNum--;
                this.addAlertData = {
                    show: false,
                    userData: '',
                    userKey: -1
                }
                this.$comFun.toast("添加成功");
            } else {
                this.$comFun.toast(res.message || "失败，请稍后再试");
            }
        },
        async openAddGroupAlert(data) {
            this.$comFun.openLoading();
            const res = await this.$request.get('chat/isGroupMember', {
                groupNumber: data.info.groupNumber
            });
            const res_1 = await this.$request.get('chat/getGroupInfo', {
                groupId: data.info.groupNumber
            });
            this.$comFun.closeLoading();
            if (res_1.code == 200) {
                this.addGroupAlertData = {
                    show: true,
                    groupData: {
                        introduction: res_1.result.groupNotice || '',
                        groupName: res_1.result.groupName,
                        groupAvatar: res_1.result.groupAvatar,
                        createTime: res_1.result.createTime.substring(0, 10),
                        groupNumber: data.info.groupNumber,
                        isGroupMember: res.code == 200 && res.result == 1 ? true : false,//是否已经加入了群聊
                    },
                    groupKey: data.key
                }
            }
        },
        async sureAddGroup() {
            this.$comFun.openLoading();
            const res = await this.$request.get('chat/joinGroup', {
                groupNumber: this.addGroupAlertData.groupData.groupNumber,
            });
            // console.log(1, res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast("加入成功");
                this.openGroupInfo();
            } else {
                this.$comFun.toast(res.message || "失败，请稍后再试");
            }
        },
        openGroupInfo() {
            let groupData = this.addGroupAlertData.groupData;
            this.addGroupAlertData = {
                show: false,
                groupData: '',
                groupKey: -1
            }
            this.$comFun.openWin('/pages/chat/info', {
                chatType: 2,
                chatGroupInfo: JSON.stringify({
                    groupName: groupData.groupName,
                    groupId: groupData.groupNumber,
                    groupAvatar: groupData.groupAvatar,
                })
            });
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/square.scss";
</style>
